<template>
  <el-tooltip content="选择图表类型" placement="top">
    <el-select
      v-model="graphical"
      class="m-2"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-tooltip>

  <el-tooltip content="选择柱状图颜色" placement="top">
    <el-color-picker v-model="barColor" />
  </el-tooltip>

  <el-tooltip content="选择折线图颜色" placement="top">
    <el-color-picker v-model="lineColor" />
  </el-tooltip>

  <el-tooltip content="是否显示提示框" placement="top">
    <el-select
      v-model="showTooltip"
      class="m-2"
      placeholder="Show Tooltip"
      size="large"
      style="width: 240px"
    >
      <el-option :value="true" label="Yes" />
      <el-option :value="false" label="No" />
    </el-select>
  </el-tooltip>

  <el-tooltip content="设置Y轴标签字体大小" placement="top">
    <el-input-number
      v-model="yAxisLabelFontSize"
      class="m-2"
      placeholder="Y Axis Label Font Size"
      size="large"
      :min="8"
      :max="24"
      style="width: 240px"
    />
  </el-tooltip>

  <el-tooltip content="设置X轴标签字体大小" placement="top">
    <el-input-number
      v-model="xAxisLabelFontSize"
      class="m-2"
      placeholder="X Axis Label Font Size"
      size="large"
      :min="8"
      :max="24"
      style="width: 240px"
    />
  </el-tooltip>

  <el-tooltip content="设置提示框字体大小" placement="top">
    <el-input-number
      v-model="tooltipFontSize"
      class="m-2"
      placeholder="Tooltip Font Size"
      size="large"
      :min="8"
      :max="24"
      style="width: 240px"
    />
  </el-tooltip>

  <el-tooltip content="设置图例字体大小" placement="top">
    <el-input-number
      v-model="legendFontSize"
      class="m-2"
      placeholder="Legend Font Size"
      size="large"
      :min="8"
      :max="24"
      style="width: 240px"
    />
  </el-tooltip>

  <div>
    <CustomEcharts
      :chartType="graphical"
      :barColor="barColor"
      :lineColor="lineColor"
      :yAxisLabelFontSize="yAxisLabelFontSize"
      :xAxisLabelFontSize="xAxisLabelFontSize"
      :tooltipFontSize="tooltipFontSize"
      :legendFontSize="legendFontSize"
      :showTooltip="showTooltip"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomEcharts from "@/components/CustomEcharts.vue";

const graphical = ref("bar");
const barColor = ref("#5470c6");
const lineColor = ref("#91cc75");
const showTooltip = ref(true);
const yAxisLabelFontSize = ref(12);
const xAxisLabelFontSize = ref(12);
const tooltipFontSize = ref(12);
const legendFontSize = ref(12);

const options = [
  { value: "bar", label: "柱形图" },
  { value: "line", label: "折线图" },
  { value: "both", label: "都有" },
];
</script>

<style scoped>
.m-2 {
  margin: 8px;
}
</style>